<template>
  <svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    x="0"
    y="0"
    width="200"
    height="200"
    viewBox="0 0 1024 1024"
    xml:space="preserve"
    :style="{ width: size, height: size }"
  >
    <g :fill="mainColor" class="logoMain">
      <path
        :fill="mainColor" fill-rule="evenodd"
        d="M675.84 849.92a30.72 30.72 0 0 1 0 61.44H256a30.72 30.72 0 0 1 0-61.44h419.84z m92.16 0a30.72 30.72 0 1 1 0 61.44 30.72 30.72 0 0 1 0-61.44z m-92.16-348.16a30.72 30.72 0 0 1 0 61.44H430.08a30.72 30.72 0 0 1 0-61.44h245.76z m92.16 0a30.72 30.72 0 1 1 0 61.44 30.72 30.72 0 0 1 0-61.44zM322.56 227.84v127.11936a162.6112 162.6112 0 0 1-126.81216 158.6176l-3.4816 0.73728-3.72736 0.75776A163.40992 163.40992 0 0 1 66.60096 360.5504l-0.04096-3.55328V227.84h256zM194.56 259.84a32 32 0 0 0-31.9488 30.18752l-0.0512 1.81248v31.96928l-32 0.03072a32 32 0 0 0-31.9488 30.18752l-0.0512 1.81248 0.21504 3.72736a32.01024 32.01024 0 0 0 29.9008 28.22144l1.88416 0.0512h32V419.84l0.21504 3.72736a32.01024 32.01024 0 0 0 63.73376-1.91488l0.0512-1.81248v-32h32a32 32 0 0 0 31.9488-30.18752l0.0512-1.81248-0.21504-3.72736a32.01024 32.01024 0 0 0-29.9008-28.22144l-1.88416-0.0512h-32V291.84l-0.21504-3.72736A32.01024 32.01024 0 0 0 194.56 259.84z"
      />
    </g>
    <g :fill="themeColor" class="theme">
      <path
       d="M610.56 3.84c2.58048 0 5.09952 0.3072 7.49568 0.88064l1.24928 0.33792c0.74752 0.2048 1.50528 0.45056 2.2528 0.7168l1.30048 0.512c0.768 0.31744 1.52576 0.67584 2.26304 1.05472l0.79872 0.43008c0.79872 0.43008 1.57696 0.90112 2.32448 1.39264l2.0992 1.51552 1.29024 1.0752 256 224a32 32 0 0 1 10.92608 24.08448V988.16c0 17.67424-14.336 32-32 32H130.56A32 32 0 0 1 98.56 988.16V542.6176A227.39968 227.39968 0 0 1 2.56 357.00736V195.84C2.56 178.16576 16.896 163.84 34.56 163.84h64V35.84c0-17.67424 14.336-32 32-32h480z m0.17408 30.72H130.56a1.28 1.28 0 0 0-1.21856 0.8704l-0.06144 0.4096V194.56h-94.72a1.28 1.28 0 0 0-1.21856 0.8704l-0.06144 0.4096v161.15712c0 62.90432 29.952 121.344 79.7696 158.18752l3.2768 2.37568 12.9536 9.17504V988.16c0 0.5632 0.36864 1.04448 0.8704 1.21856l0.4096 0.06144h736a1.28 1.28 0 0 0 1.21856-0.8704l0.06144-0.4096V259.84a1.28 1.28 0 0 0-0.2048-0.68608l-0.23552-0.27648L611.47136 34.93888l-0.49152-0.31744-0.24576-0.06144zM768 675.84a30.72 30.72 0 1 1 0 61.44 30.72 30.72 0 0 1 0-61.44z m-92.16 0a30.72 30.72 0 0 1 0 61.44H256a30.72 30.72 0 0 1 0-61.44h419.84z m92.16-348.16a30.72 30.72 0 1 1 0 61.44 30.72 30.72 0 0 1 0-61.44z m-92.16 0a30.72 30.72 0 0 1 0 61.44H430.08a30.72 30.72 0 0 1 0-61.44h245.76zM573.44 81.92a30.72 30.72 0 0 1 0 61.44H194.56a30.72 30.72 0 0 1 0-61.44h378.88z"
      />
    </g>
  </svg>
</template>
<script setup>
const props = defineProps({
  mainColor: {
    type: String,
    default: "#000",
  },
  themeColor: {
    type: String,
    default: "#6c5dd3",
  },
  size: {
    type: Number,
    default: 64,
  },
});
</script>
<style lang="less">
.logoMain {
  transition: fill 0.6s;
}
</style>